<template>
  <el-descriptions :title="'采购单:' + id" direction="vertical" :column="4" border>
    <el-descriptions-item label="供应商">{{ poData.vendorName }}</el-descriptions-item>
    <el-descriptions-item label="采购日期">{{ poData.poDate }}</el-descriptions-item>
    <el-descriptions-item label="总价">￥{{ poData.totalPrice }}</el-descriptions-item>
    <el-descriptions-item label="状态">
      <el-tag size="small">{{ poData.statusX }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="联系方式"> {{ poData.tel }} </el-descriptions-item>
    <el-descriptions-item label="地址">{{ poData.address }} </el-descriptions-item>
    <el-descriptions-item label="操作">

      <el-button type="success" v-if="poData.status == 1" v-auth:permission="`system.purchaser.manager.approve`"
        size="small" @click="manage(5)">通过</el-button>
      <el-button type="success" v-if="poData.status == 1" v-auth:permission="`system.purchaser.manager.reject`"
        size="small" @click="manage(50)">不通过</el-button>
      <el-button type="success" v-if="poData.status == 5" size="small" @click="option(10)">在途</el-button>
      <el-button type="danger" v-if="poData.status < 15" size="small" @click="option(60)">作废</el-button>
      <!-- <el-button type="success" v-if="poData.status == 10" size="small" @click="option(15)">入库</el-button> -->

    </el-descriptions-item>
  </el-descriptions>
  <el-divider />

  <el-table :data="tableDate" style="width: 100%" ref="productTableRef">
    <el-table-column fixed prop="productId" label="ID" width="80" />
    <el-table-column fixed prop="productName" label="名称" width="200" />

    <el-table-column prop="price" label="单价" width="150">
      <template #default="scope">
        ¥ {{ Number(scope.row.price).toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column prop="qty" label="数量" width="120">

    </el-table-column>
    <el-table-column v-if="getIoStatus()" prop="realQty" label="入库量" width="150">
      <template #default="scope">
        <el-input-number v-model="scope.row.realQty" :min="0" size="small" controls-position="right" />
      </template>
    </el-table-column>
    <el-table-column prop="rowTotalPrice" label="合计" width="120">
      <template #default="scope">
        ¥ {{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column prop="brief" label="备注" width="150">
    </el-table-column>
    <el-table-column v-if="getIoStatus()" prop="shelfId" label="库位" width="200">
      <template #default="scope">
        <ShelfTree v-model="scope.row.shelfId"></ShelfTree>
      </template>
    </el-table-column>
    <el-table-column v-if="getIoStatus()" prop="productionDate" label="生产日期" width="200">
      <template #default="scope">
        <el-date-picker v-model="scope.row.productionDate" type="date" placeholder="请选择" />
      </template>
    </el-table-column>
    <el-table-column v-if="getIoStatus()" prop="expirationDay " label="保质期" width="150">
      <template #default="scope">
        <el-input-number v-model="scope.row.expirationDay" :min="0" size="small" controls-position="right" />
      </template>
    </el-table-column>
    <el-table-column v-if="getIoStatus()" prop="brief2" label="入库备注" width="150">
      <template #default="scope">
        <el-input v-model="scope.row.brief2" placeholder="入库备注" />
      </template>
    </el-table-column>
  </el-table>
  <div v-if="getIoStatus()">
    <el-input v-model="ioBreif" :rows="2" type="textarea" placeholder="请输入备注" />
    <el-button type="success" @click="addIO()">入库</el-button>
  </div>
  <!-- <div v-if="getIoStatus()">
        <el-input v-model="ioBreif" :rows="2" type="textarea" placeholder="请输入备注" />
        <el-button type="success" @click="addIO()">入库</el-button>
    </div> -->
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// ref 是针对某一个变量的引用，reactive 是针对对象的引用
import { vendorApi, poApi, ioApi } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from "vue-router";
import ShelfTree from "@/components/ShelfTree.vue";
const route = useRoute()
const id = ref<any>('')
const ioBreif = ref('')
const tableDate = ref([])
const poData = reactive({
  vendorId: 0,
  vendorName: "",
  poDate: "",
  totalPrice: 0,
  tel: "",
  address: "",
  statusX: "",
  status: 0
})
const getIoStatus = () => {
  if (poData.status == 10) {
    return true
  } return false
}
onMounted(() => {

  id.value = route.query.id

  callPoApi()
  callPoItemApi()
})
const addIO = () => {
  let params = {
    poId: id.value,
    brief: ioBreif.value
  }
  let items = []
  tableDate.value.forEach((item: any) => {
    items.push({
      productId: item.productId,
      productName: item.productName,
      shelfId: item.shelfId,
      qty: item.realQty,
      brief: item.brief2,
      poItemId: item.id,
      productionDate: item.productionDate,
      expirationDay: item.expirationDay
    })
  })
  params.items = items
  console.log(params);
  ioApi.insert.call(params).then((res: any) => {
    ElMessage.success("入库成功")

  })
}
const callPoItemApi = () => {
  poApi.selectItem.call({ poId: id.value }).then((res: any) => {
    res.forEach((item: any) => {
      item.realQty = item.qty
      item.expirationDay = 30
    });
    tableDate.value = res
  })
}

const manage = (status: number) => {
  poApi.manage.call({ id: id.value, status: status }).then((res: any) => {
    ElMessage.success("操作成功")
    callPoApi()
  })
}
const option = (status: number) => {
  poApi.update.call({ id: id.value, status: status }).then((res: any) => {
    ElMessage.success("操作成功")
    callPoApi()
  })
}
const callPoApi = () => {


  poApi.select.call({ id: id.value }).then((res: any) => {


    poData.vendorName = res[0].vendorName
    poData.vendorId = res[0].vendorId
    poData.poDate = res[0].poDate
    poData.status = res[0].status
    poData.statusX = res[0].statusX


    poData.totalPrice = res[0].totalPrice
    callVendorApi()
  })
}
const callVendorApi = () => {

  vendorApi.select.call({ id: poData.vendorId }).then((res) => {
    poData.tel = res[0].tel
    poData.address = res[0].province + " " + res[0].city + " " + res[0].county + " " + res[0].address
  })
}

</script>
<style>
.el-date-editor--date {
  width: 120px !important;
}
</style>